import {messages, getToken} from "share/common";
/**
 * Created by tanbingqin on 2018/5/22.
 */
import React from 'react'
import { connect } from 'react-redux'
import configureStore from 'stores'
import { message, Row, Col, Card, Avatar, Icon } from 'antd'
import 'styles/sub-application/sub-application-view.scss'
import menuRoute from 'routes/menuRoute'
import Error from 'components/error'
import Loading from 'components/loading'
import subApplicationViewService from 'containers/sub-application/sub-application-view.service'
const { Meta } = Card;

class SubApplication extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      subApplicationList: [], //第三方应用的列表
      loading: true,
      errorContent: {
        text: messages('common.total', {total: 0}), //共搜索到 0 条数据
        title: messages('common.no.data') //无数据
      }
    }
  }

  componentDidMount() {
    this.getList();
  }
  //获取子应用列表
  getList = () => {
    subApplicationViewService.getSubApplicationList({manager: false}).then(resp => {
      if (resp.status === 200){
        this.setState({
          subApplicationList: resp.data,
          loading: false
        })
      }
    }).catch(error => {
      let errorMessage = messages('common.error');
      if (error.response && error.response.data && error.response.data.message) {
        errorMessage = error.response.data.message;
      }
      message.error(errorMessage);
    });
  }

  //打开新标签页，跳转到子应用
  goSubApplication = (link) => {
    let redirect_url = `${link}&access_token=${JSON.parse(getToken()).access_token}`;
    window.open(redirect_url ,"_blank");
  }

  render() {
    const { subApplicationList, errorContent, loading } = this.state;

    return (
      <div className="sub-application-view" style={{height: '100%'}}>
        {subApplicationList.length > 0 && (
          <div>
            <Row type="flex" justify="start" align="middle" style={{height: 50, background: '#eee', paddingLeft: 15, marginBottom: 10}}>
              <Col span={24}>
                <span style={{fontSize: 16, fontWeight: 700, color: '#656565'}}>{messages('sub-application-view.key1'/*第三方应用*/)}（{subApplicationList.length}）</span>
              </Col>
            </Row>
            <Row gutter={16}>
              {
                subApplicationList.map((item, index) =>
                  <Col span={6} style={{marginBottom: 20}} key={index} onClick={() => this.goSubApplication(item.link)}>
                    <Card hoverable={true} style={{borderRadius: 5}}>
                      <Meta
                        avatar = {(
                          <div>
                            {item.appIcon && (
                              <Avatar size="large" src={item.appIcon} />
                            )}
                            {!item.appIcon && (
                              <Avatar size="large" src={noInfo} />
                            )}
                          </div>
                        )}
                        description={item.appName}
                      />
                    </Card>
                  </Col>
                )
              }
            </Row>
          </div>
        )}
        {!subApplicationList.length && (
          <div style={{background: '#F0F2F5', height: '100%'}}>
            {loading && (
              <Loading/>
            )}
            {!loading && (
              <Error {...errorContent} />
            )}
          </div>
        )}
      </div>
    )
  }
}

SubApplication.contextTypes ={
  router: React.PropTypes.object
}

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(SubApplication)
